@import "../../style/variables.less";
@import "../../style/mixins/index.less";

.w-chackbox-warpper{
  .w-chackbox{
    display: inline-block;
    height: @checkbox-size;
    width: @checkbox-size;
    vertical-align: text-bottom;
    overflow: hidden;
    text-align: left;
    background: transparent;
    border-radius: @checkbox-border-radius;
    transition: background @transition-time @transition-timing-functio;
    input{
      position: absolute;
      left: -19990px;
      height: 1px;
      overflow: hidden;
    }
    &:before,&.checked:before,&.checked:after,
    &.indeterminate:before,
    &.indeterminate:after{
      transition: background-color @transition-time @transition-timing-functio;
      content: '';
      display: inline-block;
    }
    &:before,&.indeterminate:before{
      display: block;
      width: 100%;
      height: 100%;
      border-radius: @checkbox-border-radius;
      border:1px solid @checkbox-border-gray-light;
    }
    &.checked{
      background: @checkbox-bg-base;
      &:before{
        border:0;
      }
    }
    &.indeterminate{
      &:before{
        background-color: @checkbox-default-bg-color;
        border:1px solid @checkbox-bg-base;
      }
      &:after{
        width: @checkbox-indeterminate-size;
        height: @checkbox-indeterminate-size;
        position: relative;
        top: -16px;
        left: 3px;
        background-color: @checkbox-bg-base;
        border-radius: @checkbox-after-radius;
      }
    }
    &.checked:after{
      border: solid @checkbox-default-bg-color;
      border-width: 0 2px 2px 0;
      transform: rotate(@checkbox-transform-rotate);
      position: relative;
      float: left;
      top: -17px;
      right: -4px;
      height: 10px;
      width: 6px;
    }
    &.disabled,&.disabled+span{
      cursor: @cursor-disabled;
      color: @checkbox-disabled-color;
    }
    &+span{
      padding-left: @checkbox-label-padding-left;
      padding-right: @checkbox-label-padding-right;
      user-select:none;
    }
    &.disabled{
      background-color: @gray-lighter;
      &.checked{
        &:before{
          background-color: @gray-lighter;
          border:1px solid @checkbox-border-gray-light;
        }
        &:after{
          border-color:@checkbox-border-gray-light;
        }
      }
      &.indeterminate{
        &:before{
          border:1px solid @checkbox-border-gray-light;
        }
        &:after{
          background-color: @checkbox-border-gray-light;
        }
      }
    }
  }
}